﻿<script>

    function timeConverter(UNIX_timestamp) {
        var timestmp = UNIX_timestamp.substring(6, 19);
        var a = new Date(timestmp * 1000);
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var year = a.getFullYear();
        var month = months[a.getMonth()];
        var date = a.getDate();
        var hour = a.getHours();
        var min = a.getMinutes();
        var sec = a.getSeconds();
        var time = date + ',' + month;
        return time;
    }

</script>

<script>
function profileInfo(){
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "http://localhost:58872/profile/ProfileInfo",
        //data: data,
        dataType: "json",
        success: function (data) {
            if (data.Error) {
                alert(data.Error)
            } else {
                var divplace = '<div id="name"><h5 id="nume">{0}</h5><a onclick="addfriends()">Add Friend!</a></div>';
                var divplace1 = divplace.replace("{0}", data.Name);
                $("#name").remove();
                $(".accout-profile-header-right").append(divplace1);
            }
        },
        error: function (result) {
            alert(data.Error);
        }
    });
}

function addfriends() {

    var friend = Object();
    friend.Name = $("#nume").text();
//    alert(friend.Name)

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "http://localhost:58872/profile/AddFriends",
        data: JSON.stringify(friend),
        dataType: "json",
        success: function (data) {
            if (data.Error) {
                alert(data.Error)
            } else {
                //location.reload(true);
                alert("ok");
            }
        },
        error: function (result) {
            alert("error");
        }
    });
    
}

function getUserTrips() {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "http://localhost:58872/trip/getUserTrips",
        //data: data,
        dataType: "json",
        success: function (data) {
            if (data.Error) {
                alert(data.Error)
            } else {
                var divplace = '<div class="latest-news-grids"><div class="news-latter-artical"><img class="news-latter-artical-pic" src="../../Images/news-artical-pic.png" alt="" /><h4><a href="#">{0}</a></h4><p>{1}</p><div class="news-latter-artical-related"><div class="news-latter-artical-related-left"><a href="#">{2}</a></div><div class="news-latter-artical-related-right"><a class="articl-readmore" onclick="getTripId()">Read More</a><p id="trip_id" style="display:none">{3}</p></div><div class="clear"> </div></div></div></div>';
                for (i = 0; i < data.length; i++) {
                    var divplace0 = divplace.replace("{0}", data[i].Name);
                    var divplace1 = divplace0.replace("{1}", data[i].Description);
                    var divplace2 = divplace1.replace("{2}", timeConverter(data[i].StartDay));
                    var divplace3 = divplace2.replace("{3}", data[i].Name);
                    $(".split-right").append(divplace3);
                }
            }
        },
        error: function (result) {
            alert(data.Error);
        }
    });
}


function getUserFriends() {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "http://localhost:58872/profile/getUserFriends",
        //data: data,
        dataType: "json",
        success: function (data) {
            if (data.Error) {
                alert(data.Error)
            } else {
                var divplace = '<li><a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;" /> {0}</a></li><li>'
                for (i = 0; i < data.length; i++) {
                    var divplace0 = divplace.replace("{0}", data[i].Name);
                    $("#addfriend").append(divplace0);
                }
            }
        },
        error: function (result) {
            alert(data.Error);
        }
    });
}

function getTripId() {

    var tripId = $("#trip_id").text();
    window.location = 'http://localhost:58872/home/viewtrip/?tripid=' + tripId;
}



$(document).ready(function () {
    profileInfo();
    getUserFriends();
    getUserTrips();
});


 </script>

<script>
    function hideshow(which) {
        if (!document.getElementById)
            return
        if (which.style.display == "block")
            which.style.display = "none"
        else
            which.style.display = "block"
    }

   
 </script>

 				
				</br>			
				<div class="split-left">	
				<div class="account_box">	
				<div class="accout-profile-header">
							<div class="accout-profile-header-left">
								<a href="#"><img src="../../../../Images/profile-pic.png" alt="" /></a>
							</div>
							<div class="accout-profile-header-right"></br>
								<div id="name"><h5>Name</h5>
								
								<a href="#">Add friend!</a>
                                </div>
							</div>
							<div class="clear"> </div>
						</div>
						<div class="accout-profile-info" >
							<p>Descriere User</p>
						<ul>
								<li ><a href="javascript:hideshow(document.getElementById('show_friends'))" > <span >Friends</span><label>457</label></a></li>	
								<li><a href="#"> <span>Trips attended</span><label>200</label></a></li>
								<li><a href="#"> <span>Trips created</span><label>2324</label></a></li>
								<div class="clear"> </div>
								
						</ul>
						</div>
						
				</div>

				<div id="show_friends">
				
				<div class="payment-online-form-right" >
						
						<ul id="addfriend">
							@*<li>								
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;" /> Friend 1</a></li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 2</a>
							</li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;" /> Friend 3</a>
							</li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 4</a>
							</li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 5</a>
							</li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 6</a>
							</li>*@
							
							
						</ul>
					</div>
					<div class="clear"> </div>
				</div>
				
				</div>
				</div>
				<div class="split-right">
				<div class="news-latter-box">
					<h4>Where I have been...</h4>
				</div>
				<!--<div class="latest-news-grids">	
						
						<div class="news-latter-artical">
							<img class="news-latter-artical-pic" src="../../Images/news-artical-pic.png" alt="" />
							<h4><a href="#">Trip1</a></h4>
							<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							<div class="news-latter-artical-related">
								<div class="news-latter-artical-related-left">
									<a href="#">August 8, 2013</a>
								</div>
								<div class="news-latter-artical-related-right">
									<a class="articl-readmore" href="Trip">Read More</a>
								</div>
								<div class="clear"> </div>
							</div>
						</div>
				</div>
				
				<div class="latest-news-grids">	
						
						<div class="news-latter-artical">
							<img class="news-latter-artical-pic" src="../../Images/news-artical-pic.png" alt="" />
							<h4><a href="#">Trip2</a></h4>
							<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							<div class="news-latter-artical-related">
								<div class="news-latter-artical-related-left">
									<a href="#">August 8, 2013</a>
								</div>
								<div class="news-latter-artical-related-right">
									<a class="articl-readmore" href="Trip">Read More</a>
								</div>
								<div class="clear"> </div>
							</div>
						</div>
				</div>	
				<div class="latest-news-grids">	
						
						<div class="news-latter-artical">
							<img class="news-latter-artical-pic" src="../../Images/news-artical-pic.png" alt="" />
							<h4><a href="#">Trip3</a></h4>
							<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							<div class="news-latter-artical-related">
								<div class="news-latter-artical-related-left">
									<a href="#">August 8, 2013</a>
								</div>
								<div class="news-latter-artical-related-right">
									<a class="articl-readmore" href="Trip">Read More</a>
								</div>
								<div class="clear"> </div>
							</div>
						</div>
				</div>-->
				</div>
					<div class="clear"> </div>
				
	
